<%@ page contentType="text/html;charset=UTF-8" %>
<%@ page import="org.apache.shiro.web.filter.authc.FormAuthenticationFilter"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>${fns:getConfig('productName')} 登录</title>
		<link rel="stylesheet" type="text/css" href="${ctxStatic}/userstatic/css/JoynBackground.css" />
		<link href="${ctxStatic}/userstatic/icon/font-awesome.min.css" type="text/css" rel="stylesheet" />
		
		<script type="text/javascript" src="${ctxStatic}/jquery/jquery-1.8.3.min.js"></script>
		<style>
			#loginBox{
				width: 500px;
				height: 300px;
				background: white;
				position: fixed;
				top: 50%;
				left: 50%;
				margin-top: -150px;
				margin-left: -250px;
				border-radius: 4px;
				border: 1px solid deepskyblue;
			}
			#loginBox .login_title{
				line-height: 50px;
				height: 50px;
				width: 350px;
				margin: -25px auto 0;
				text-align: center;
				color: deepskyblue;
				font-size: 24px;
				background: white;
				border: 2px solid deepskyblue ;
				border-radius: 25px;
				box-shadow: 0 3px 2px #999999;
			}
			#loginBox .login_row{
				width: 350px;
				margin: 10px auto;
				overflow: hidden;
				border: 1px solid #999999;
				border-radius: 40px;
				padding: 5px 0;
				transition: all .5s;
			}
			#loginBox .login_code{
				width: 350px;
				margin: 10px auto;
			}
			#loginBox .login_code>*{
				float: left;
				font-size: 13px;
				padding: 0;
				margin: 0;
			}
			#loginBox .login_code>label{
				line-height: 30px;
			}
			#loginBox .login_code>input{
				line-height: 22px;
			}
			#loginBox .login_code>a{
				line-height: 30px;
			}
			#loginBox .login_row.is_edit{
				border: 1px solid deepskyblue;
			}
			#loginBox .login_row .login_text{
				width: 40px;
				text-align: center;
				color: deepskyblue;
				font-size: 20px;
				float: left;
				padding: 0;
				margin: 0;
				height: 30px;
			}
			#loginBox .login_row .login_text>i{
				line-height: 30px;
			}
			#loginBox .login_row .login_input{
				width: 300px;
				margin-top: -2px;
				line-height: 30px;
				float: left;
				padding: 0;
				margin: 0;
				height: 30px;
			}
			#loginBox .login_row>.login_input>input{
				width: 100%;
				display: inline-block;
				border: none;
				outline: none;
				height: 28px;
			}
			#loginBox .login_submit{
				width: 350px;
				border: 0;
				background: deepskyblue;
				color: white;
				line-height: 35px;
				border-radius: 30px;
				display: block;
				margin: 36px auto;
				cursor: pointer;
				outline: none;
				font-size: 18px;
				transition: all .25s;
			}
			
			#loginBox .login_submit:hover{
				margin-top: 34px;
				box-shadow: 1px 3px 3px #AAAAAA;
			}
			
			#loginBox .login_footer{
				position: absolute;
				bottom: 16px;
				width: 100%;
				color: #AAAAAA;
				text-align: center;
				font-size: 13px;
			}
			
			#loginBox .login_footer a{
				color: deepskyblue;
				text-decoration: none;
			}
			
			#loginBox .login_error{
				color: red;
				font-size: 13px;
				width: 350px;
				height: 30px;
				line-height: 30px;
				margin: 0px auto;
				text-align: center;
			}
		</style>
		<script type="text/javascript" src="${ctxStatic}/userstatic/js/JoynBackground.js"></script>
		<script>
			$(document).ready(function() {
				JoynBackground(2, 8000); //场景动画类型和时间
				/* 场景动画类型：【1】拉近【2】拉远【3】幻灯片显示 */
			})
			
			</script>

	</head>

	<body>
		
		<div id="loginBox">
			<div class="login_title">
				人员及物品动态监控系统
			</div>
			<div class="login_content">
				<form id="loginForm" class="form-signin" action="${ctx}/login" method="post">
					<div class="login_error">
						<span>${message}</span>
					</div>
					<div class="login_row">
						<div class="login_text">
							<i class="fa fa-user"></i>
						</div>
						<div class="login_input">
							<input type="text" name="username" placeholder="请输入用户名" class="login_input" />
						</div>
					</div>
					<div class="login_row">
						<div class="login_text">
							<i class="fa fa-lock"></i>
						</div>
						<div class="login_input">
							<input type="password"  name="password" placeholder="请输入账号密码" class="login_input" />
						</div>
					</div>
					<c:if test="${isValidateCodeLogin}">
					<div class="login_code">
						<label class="input-label mid" for="validateCode">验证码</label>
						<sys:validateCode name="validateCode" inputCssStyle="margin-bottom:0;"/>
					</div>
					</c:if>
					<input class="login_submit" type="submit" value="登       录" />
					
				</form>
			</div>
			<div class="login_footer">
				Copyright &copy; ${fns:getConfig('copyrightYear')} <a href="${pageContext.request.contextPath}${fns:getFrontPath()}">${fns:getConfig('productName')}</a>
			</div>
		</div>
		
		
		<!-- 背景[就这么简单] -->
		<div id="JoynBackground">
			<img src="${ctxStatic}/userstatic/img/1.jpg" name="1" />
			<img src="${ctxStatic}/userstatic/img/2.png" name="2" />
			<img src="${ctxStatic}/userstatic/img/3.jpg" name="3" />
		</div>
		<!-- 背景 -->

	</body>
	<script type="text/javascript">
		$("#loginBox input").focus(function(){
			$(this).parents('.login_row').addClass('is_edit');
		}).blur(function(){
			$(this).parents('.login_row').removeClass('is_edit');
		})
	</script>
</html>